<template>
  <div class="dashboard-container">
    <div class="employees-container">
      <div class="app-container">
        <!-- 通用工具栏组件使用 -->
        <page-tools>
          <!-- 自定义左侧内容 -->
          <template #slot-left>
            <span>共 19 条记录</span>
            <span>共19条记录</span>
          </template>

          <!-- 自定义右侧内容 -->
          <template #slot-right>
            <el-button type="danger" size="small" @click="uploadExcelClickFn">导入excel</el-button>
            <el-button type="success" size="small" @click="exportExcelClickFn">导出excel</el-button>
            <el-button type="primary" size="small" @click="addEmpClickFn">新增员工</el-button>
          </template>
        </page-tools>

        <el-card style="margin-top: 10px">
          <el-table border :data="employeesList" :default-sort="{ prop: 'timeOfEntry', order: 'descending' }">
            <el-table-column type="index" label="序号" />
            <el-table-column prop="username" label="姓名" />
            <el-table-column v-slot="scoped" prop="staffPhoto" label="头像">
              <img v-if="scoped.row.staffPhoto !== ''" :src="scoped.row.staffPhoto" alt="" class="img" />
              <img v-else="" src="@/assets/common/head.jpg" class="img" alt="" />
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" />
            <el-table-column prop="workNumber" label="工号" />
            <el-table-column sortable prop="formOfEmployment" label="聘用形式" :formatter="forOfEmploymentFormatterFn">
              <!-- <template v-slot="scoped"> -->
              <!-- {{
                  scoped.row.formOfEmployment * 1 === 1
                    ? '正式'
                    : scoped.row.formOfEmployment * 1 === 2
                    ? '非正式'
                    : '未知'
                }} -->
              <!-- </template> -->
            </el-table-column>
            <el-table-column prop="departmentName" label="部门" />
            <el-table-column sortable prop="timeOfEntry" label="入职时间" :sort-method="timeOfEntrySortFn">
              <template slot-scope="scope">
                <span>{{ scope.row.timeOfEntry | formatTime }}</span>
                <!-- <span>{{ scope.row.timeOfEntry }}</span> -->
              </template>
            </el-table-column>
            <!-- <el-table-column prop="" label="账户状态" /> -->
            <el-table-column label="操作" width="200">
              <template v-slot="scope">
                <el-button type="text" size="small" @click="lookDetailFn(scope.row.id)">查看</el-button>
                <el-button type="text" size="small">分配角色</el-button>
                <el-button type="text" size="small" @click="delEmpFn(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页组件 -->
          <el-row type="flex" justify="center" align="middle" style="height: 60px">
            <!-- 分页区域 -->
            <el-pagination
              :current-page="query.page"
              :page-sizes="[10, 15, 20, 25]"
              :page-size="query.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-row>
        </el-card>
        <!-- 新增员工弹框组件 -->
        <!-- 新增员工弹框组件 -->
        <el-dialog title="新增员工" :visible.sync="showDialog" @close="closeDialogFn">
          <emp-dialog
            ref="empDialog"
            :show-dialog.sync="showDialog"
            :departments-tree-list="departmentsTreeList"
            @addEmpEV="addEmpFn"
          />
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { getEmployeesListAPI, delEmployeesAPI, addEmployeesAPI } from '@/api/employees'
import { getDepartmentsListAPI } from '@/api/departments'
import { tranListToTreeData } from '@/utils'
// 问题：如果判断的值有很多情况，条件运算符嵌套就非常麻烦了
// 解决：枚举思路(定义--映射关系的数据对象，key是原来标识，value是要转换的值)
// 问题：find方法查找对象，{{}}里面写不了语句只能写表达式
import empDialog from './empDialog.vue' // el-form表单组件封装在内
import EmployeeEnum from '@/api/constant'
import dayjs from 'dayjs'

export default {
  name: 'Employees',
  // 注册组件
  components: {
    empDialog
  },
  filters: {
    // 格式化入职日期的方法
    formatTime(time) {
      return dayjs(time).format('YYYY-MM-DD')
    }
  },
  data() {
    return {
      query: {
        page: 1, // 页码
        size: 10 // 每页条数
      },
      employeesList: [], // 员工列表
      total: 0, // 数据总条数
      showDialog: false, // 新增员工-弹窗是否出现
      departmentsTreeList: [] // 部门列表(树形数据)
    }
  },
  created() {
    this.getEmployeesListFn()
    this.getDepartmentsListAPI()
  },
  methods: {
    // 获取员工列表
    async getEmployeesListFn() {
      const res = await getEmployeesListAPI(this.query)
      console.log(res)
      this.employeesList = res.data.rows
      this.total = res.data.total
    },
    // 获取部门列表
    async getDepartmentsListAPI() {
      const res = await getDepartmentsListAPI()
      console.log(res)
      this.departmentsTreeList = tranListToTreeData(res.data.depts, '')
    },
    // 每页显示的条数发生改变时触发
    handleSizeChange(newSize) {
      this.query.size = newSize
      this.getEmployeesListFn()
    },

    // 当前页面发生改变时触发
    handleCurrentChange(newPage) {
      this.query.page = newPage
      this.getEmployeesListFn()
      // 拓展知识：我直接把请求放在created里，以后里面this.created()行不行？ 不行
      // 因为钩子函数（生命周期函数8个），是没有挂载到组件的身上，所有不能用this调用钩子函数
    },
    // 格式化->聘用形式列内容
    forOfEmploymentFormatterFn(row) {
      const obj = EmployeeEnum.hireType.find(item => item.id === row.formOfEmployment * 1)
      return obj ? obj.value : '未知'
    },
    // 入职时间->排序
    timeOfEntrySortFn(a, b) {
      // 还要
      // return NaN相当于 返回了0
      if (!a.timeOfEntry) {
        a.timeOfEntry = '1970-01-01'
      }
      if (!b.timeOfEntry) {
        b.timeOfEntry = '1970-01-01'
      }
      // const aDate = new Date(a.timeOfEntry)
      // const bDate = new Date(b.timeOfEntry)
      // console.log(aDate, bDate)
    },
    // 删除-员工-点击事件
    async delEmpFn(id) {
      await delEmployeesAPI(id)
      if (this.employeesList.length === 1) {
        this.query.page--
        if (this.query.page <= 0) {
          this.query.page = 1
        }
      }
      this.getEmployeesListFn()
    },
    // 新增员工-按钮-点击事件（头部工具栏右上角按钮）
    addEmpClickFn() {
      this.showDialog = true
    },
    // 新增员工->表单的确定事件
    async addEmpFn(formObj) {
      const result = dayjs(formObj.timeOfEntry).format('YYYY-MM-DD')
      formObj.timeOfEntry = result
      const res = await addEmployeesAPI(formObj)
      console.log(res)
      this.getEmployeesListFn()
    },
    // 弹窗+表单关闭事件
    closeDialogFn() {
      // 表单重置
      this.$refs.empDialog.$refs.addForm.resetFields()
    },
    // 导入excel-按钮-点击事件
    uploadExcelClickFn() {
      this.$router.push('/excel')
    },
    // 导出excel-按钮-点击事件
    exportExcelClickFn() {
      import('@/vendor/Export2Excel').then(async excel => {
        // webpack提供的一个import函数
        // 引入一个文件，原地得到一个Promise对象
        // 笔记写法：根据后台返回的字段全部导出
        // 业务：导出所有数据到表格文件中
        // 1.拿到所有要导出的数据
        const res = await getEmployeesListAPI({
          page: 1,
          size: this.total // 总数作为第一页，一共要多少条
        })
        // 2.为何自己写参数对象，不用改this.query，因为this.query是铺设页码用的数据，拿到所有数据
        console.log(res)
        const empList = res.data.rows
        /*
        // 3.准备数据结构，为导出表格做准备（数据处理）
        // 重点：一定要知道现有的数据结构，和想要的数据结构现有数组里套对象（英文key）
        //      想要二维数组，小数组里装对象里关键值（表格一行数据）
        // 额外：准备列表头数组
        // 3.1 先准备列表头中文名字数组-映射好英文对应中文的值
        const myObj = {
          id: '编号',
          password: '密码',
          mobile: '手机号',
          username: '姓名',
          timeOfEntry: '入职日期',
          formOfEmployment: '聘用形式',
          correctionTime: '转正日期',
          workNumber: '工号',
          departmentName: '部门',
          staffPhoto: '头像地址'
        }
        // 3.2 拿到英文key的字符串数组
        const enKeyArr = Object.keys(empList[0]) // ['id','moble','username',...] 一共十个英文key字符串数组
        // 对象是无序的，所以数值不一定是哪个key在前还是后

        // 3.3 遍历出每个英文的key，换出某个中文key，形成数组
        const zhKeyArr = enKeyArr.map(enKey => {
          // map会遍历左侧数组中每个值，传给enKey形参执行一次函数体
          return myObj[enKey] // 执行一次函数体，就return值给map内部，收集到一共新数组里（push进）
        }) // 等待map循环enKeyArr结束，新的数组（里面是中文的key）返回在原地
        console.log(zhKeyArr)

        // 3.4 拿到值的数组
        // Object.values（对象） //对象所有的value值收集成一共数组返回在原地[]
        const valerArr = empList.map(obj => {
          return Object.values(obj) // 小数组，值的数组[]
        }) // 遍历结束 [[],[],[]]

        // const tHeader = ['序号', '姓名', '爱好']
        excel.export_json_to_excel({
          // 才是关键->调用Export2Excel.js中导出方法
          header: zhKeyArr, // 表格列表头
          data: valerArr, // 二维数组(每个小数组代表一行数据)
          filename: '人资管理系统-员工列表', // 文件名
          autoWidth: true, // 自动宽度
          bookType: 'xlsx' // xlsx文件类型
        })*/

        // 考虑顺序（页面上列保持一致顺序）
        // 4.0 准备一共列表头中文数组
        const headerArr = ['序号', '姓名', '头像地址', '手机号', '工号', '聘用形式', '部门', '入职日期']
        const myObj = {
          // 序号可以等遍历的时候直接用索引值
          姓名: 'username',
          头像地址: 'staffPhoto',
          手机号: 'mobile',
          工号: 'workNumber',
          聘用形式: 'formOfEmployment',
          部门: 'departmentName',
          入职日期: 'timeOfEntry'
        }
        // 4.2 按照顺序，形参值的数组
        const resultArr = empList.map((item, index) => {
          const valueArr = [] // 值的小数组
          headerArr.forEach(zhKey => {
            if (zhKey === '序号') {
              valueArr.push(index + 1)
            } else if (zhKey === '聘用形式') {
              if (item.formOfEmployment === 1) {
                valueArr.push((item.formOfEmployment = '正式'))
              } else if (item.formOfEmployment === '2') {
                valueArr.push((item.formOfEmployment = '非正式'))
              } else {
                console.log(item.formOfEmployment)
                valueArr.push((item.formOfEmployment = '未知'))
              }
            } else {
              const enKey = myObj[zhKey]
              valueArr.push(item[enKey])
            }
          })
          return valueArr
        })
        console.log(resultArr)
        // const tHeader = ['序号', '姓名', '爱好']
        excel.export_json_to_excel({
          // 才是关键->调用Export2Excel.js中导出方法
          header: headerArr, // 表格列表头
          data: resultArr, // 二维数组(每个小数组代表一行数据)
          filename: '人资管理系统-员工列表', // 文件名
          autoWidth: true, // 自动宽度
          bookType: 'xlsx' // xlsx文件类型
        })
      })
    },
    // 点击查看
    lookDetailFn(empId) {
      this.$router.push(`/employees/detail?id=${empId}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.img {
  width: 100%;
  height: 100%;
}
</style>
